<template>
    <div class="invoice">
       <div class="title">
         <img src="../assets/images/fanhui.png" @click="fanhui" height="16px" alt="" style="float: left;margin-top: 12px;">
         商品订单
       </div>
       <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            >
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
        </van-search>
        <van-tabs v-model="activeName" @click="logg">
            <van-tab title="全部" name="a"><Shangp :shuzu="shuzu"/></van-tab>
            <van-tab title="代发货" name="b" ><Shangp :shuzu="shuzu"/></van-tab>
            <van-tab title="待收货" name="c" ><Shangp :shuzu="shuzu"/></van-tab>
            <van-tab title="待评价" name="d" ><Shangp :shuzu="shuzu"/></van-tab>
        </van-tabs>
    </div>
</template>

<script>
//a 待发货  b 代收货
import {ordervlist,ordervlista,ordervlistb,ordervlistc} from '../requset/api'
import Shangp from '../components/shangp'
export default {
    data () {
        return {
            value:'',
            activeName: 'a',
            shuzu:[]
        }
    },
    created(){
       ordervlist({
          params:{
           current:1,
           size:10,
           keyword:'',
          }
       }).then(res=>{
        //    console.log(res);
           this.shuzu=res.data.records
       })
    }, 
    methods:{
        onSearch(){
            // console.log(123);
        },
        fanhui(){
            this.$router.back()
        },
        logg(name){
            // console.log(name);
            if(name=='a'){
            ordervlist({
                    current:1,
                    size:10,
                    keyword:'',
                }).then(res=>{
                    // console.log(res);
                    this.shuzu=res.data.records
                })
            }
            if(name=='b'){
              ordervlista({
                current:1,
                size:10,
                keyword:'',
              }).then(res=>{
                  this.shuzu=res.data.records
              })
            }
            if(name=='c'){
            ordervlistb({
                current:1,
                size:10,
                keyword:'',
            }).then(res=>{
                this.shuzu=res.data.records
            })
            }
            if(name=='d'){
                // console.log(123);
            ordervlistc({
                 current:1,
                size:10,
                keyword:'',
            }).then(res=>{
                // console.log(res.data.records);
                this.shuzu=res.data.records
            })
            }
        },
        
    },
    components:{
        Shangp
    }
}
</script>
 
<style lang = "less" scoped>
.invoice{
    width: 100%;
    min-height:100vh ;
    background: #f5f5f5;
        .title{
        height: 43px;
        width: 100%;
        background: #003399;
        text-align: center;
        line-height: 43px;
        color: #fff ;
        padding-left: 12px;
        box-sizing: border-box;
        
    }
    .van-search__content,.van-search__content--square{
           border-radius:20px ;
    }
    .van-search__action{
        color: #003399;
    }
}

</style>